<script setup>
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox, ElTag, ElImage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import * as admin from '@/api/index.js'
import { useTokenStore } from '@/stores/token.js';
const tokenStore = useTokenStore();

// 所有历史订单数据
const allOrders = ref([]);

const searchQuery = ref(""); // 搜索关键词
const showDialog = ref(false); // 评价弹窗状态
const currentOrder = ref(null); // 当前被评价的订单
const total = ref(0);

// 分页
const pageSize = ref(10); // 每页显示条数
const currentPage = ref(1); // 当前页码

// 过滤后的订单数据
const filteredOrders = computed(() => {
  findData()
});

// 分页后的订单数据
const paginatedOrders = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  findData()
});

// 点击评价按钮
const openReviewDialog = (order) => {
  currentOrder.value = { ...order }; // 复制订单数据
  showDialog.value = true;
};

// 提交评价
const submitReview = async () => {
  if (!currentOrder.value.rating) {
    ElMessage.warning("请给订单评分！");
    return;
  }

  // 更新订单评价信息
  const index = allOrders.value.findIndex((o) => o.orderId === currentOrder.value.orderId);
  if (index !== -1) {
    allOrders.value[index].rating = currentOrder.value.rating;
    allOrders.value[index].review = currentOrder.value.review;
  }


  const param = {
    orderId: currentOrder.value.id, 
    rating: currentOrder.value.rating, 
    comment: currentOrder.value.review,
    productId: currentOrder.value.productId,
  }
  const res = await admin.addProductReview(param)
  if (res.code == 0) {
    ElMessage.success("评价提交成功！");
  } else {
    ElMessage.error("评价提交失败！");
  }
  showDialog.value = false;
  findData()
};



const findData = async () => {
  const res = await admin.findOrders({
    currentPage: currentPage.value,
    token: tokenStore.token,
    code: searchQuery.value
  });
  if (res.code == 0) {
    allOrders.value = res.data;
    total.value = res.total;
  }
};

const searchProducts = () => {
  findData()
};

const handlePageChange = (page) => {
  currentPage.value = page;
  findData();
};

findData()
</script>

<template>
  <div class="container">
    <h2>📦 历史订单</h2>

    <!-- 搜索框 -->
    <div class="search-bar">
    <el-input
      v-model="searchQuery"
      placeholder="输入订单编号搜索"
      clearable
      style="width: 300px; margin-bottom: 10px"
    />
    <el-button type="primary" class="search-btn" @click="searchProducts">🔍 搜索</el-button>
    </div>

    <!-- 订单表格 -->
    <el-table :data="allOrders" border stripe style="width: 100%">
      <el-table-column prop="code" label="订单编号" width="150" />
      <el-table-column prop="img" label="产品图片" width="120">
        <template #default="{ row }">
          <el-image
            :src="row.img"
            fit="cover"
            style="width: 60px; height: 60px; border-radius: 5px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="chanpin" label="产品名称" />
      <el-table-column prop="quantity" label="数量" width="80" />
      <el-table-column prop="totalPrice" label="总价 (¥)" width="100" />
      <el-table-column prop="createdAt" label="创建时间" width="180" />
      <el-table-column label="评价" width="120">
        <template #default="{ row }">
          <el-tag v-if="row.isReviewed" type="success">已评价</el-tag>
          <el-button v-else type="primary" @click="openReviewDialog(row)">评价</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 评价弹窗 -->
    <el-dialog v-model="showDialog" title="评价订单" width="400px">
      <div class="review-content">
        <p><strong>产品名称：</strong> {{ currentOrder?.chanpin }}</p>

        <el-rate v-model="currentOrder.rating" allow-half />

        <el-input
          v-model="currentOrder.review"
          type="textarea"
          placeholder="请输入评价内容"
          maxlength="200"
          show-word-limit
        />

        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="submitReview">提交</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.container {
  padding: 20px;
  max-width: 900px;
  margin: auto;
}

h2 {
  margin-bottom: 20px;
}

/* 评价弹窗 */
.review-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dialog-footer {
  text-align: right;
  margin-top: 20px;
}




.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

::v-deep(.el-pagination) {
  font-size: 18px; 
}

::v-deep(.el-pagination .el-pager li) {
  padding: 0 12px;    
  height: 40px;
  line-height: 40px;
  font-size: 18px;
}

::v-deep(.el-pagination button) {
  font-size: 18px;
  padding: 0 12px;
}
</style>
